import { Metadata } from 'next';
import Link from 'next/link';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Progress } from '@/components/ui/progress';
import {
  ArrowLeft,
  TrendingUp,
  Clock,
  Zap,
  Shield,
  DollarSign,
  BarChart3,
  CheckCircle,
  AlertTriangle,
  Target,
  Cpu,
  Database,
  Network,
  Users,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '大型银行高频交易系统案例 | CActor框架',
  description:
    '了解CActor框架如何帮助大型银行构建毫秒级响应的高频交易系统，实现300%性能提升。',
};

/**
 * 项目关键指标数据
 */
const keyMetrics = [
  {
    icon: Clock,
    label: '交易延迟',
    before: '50ms',
    after: '7.5ms',
    improvement: '85%',
    color: 'text-green-600',
  },
  {
    icon: Zap,
    label: '处理能力',
    before: '25万/秒',
    after: '100万/秒',
    improvement: '300%',
    color: 'text-blue-600',
  },
  {
    icon: Shield,
    label: '系统稳定性',
    before: '99.9%',
    after: '99.99%',
    improvement: '0.09%',
    color: 'text-purple-600',
  },
  {
    icon: DollarSign,
    label: '运营成本',
    before: '100%',
    after: '60%',
    improvement: '40%',
    color: 'text-orange-600',
  },
];

/**
 * 技术架构组件
 */
const architectureComponents = [
  {
    name: '交易引擎',
    description: '基于CActor的高性能交易处理核心',
    features: ['毫秒级响应', '内存计算', '无锁并发'],
    icon: Cpu,
  },
  {
    name: '数据层',
    description: '分布式实时数据存储和处理',
    features: ['实时同步', '数据分片', '故障恢复'],
    icon: Database,
  },
  {
    name: '网络层',
    description: '低延迟网络通信和消息传递',
    features: ['零拷贝', '批量处理', '智能路由'],
    icon: Network,
  },
  {
    name: '监控系统',
    description: '全方位系统监控和告警',
    features: ['实时监控', '智能告警', '性能分析'],
    icon: BarChart3,
  },
];

/**
 * 实施时间线
 */
const timeline = [
  {
    phase: '需求分析',
    duration: '2周',
    status: 'completed',
    description: '深入分析现有系统瓶颈，制定技术方案',
    deliverables: ['需求文档', '技术方案', '架构设计'],
  },
  {
    phase: '原型开发',
    duration: '4周',
    status: 'completed',
    description: '构建核心交易引擎原型，验证关键技术',
    deliverables: ['原型系统', '性能测试', '技术验证'],
  },
  {
    phase: '系统开发',
    duration: '12周',
    status: 'completed',
    description: '完整系统开发，包括所有核心功能模块',
    deliverables: ['完整系统', '单元测试', '集成测试'],
  },
  {
    phase: '压力测试',
    duration: '3周',
    status: 'completed',
    description: '全面压力测试，性能调优和稳定性验证',
    deliverables: ['测试报告', '性能优化', '稳定性验证'],
  },
  {
    phase: '生产部署',
    duration: '2周',
    status: 'completed',
    description: '生产环境部署，灰度发布和全量上线',
    deliverables: ['生产部署', '监控配置', '运维文档'],
  },
  {
    phase: '运维优化',
    duration: '持续',
    status: 'ongoing',
    description: '持续监控优化，功能迭代和性能提升',
    deliverables: ['监控报告', '优化方案', '功能升级'],
  },
];

export default function BankHFTCasePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* 导航 */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <Link
            href="/cases"
            className="inline-flex items-center text-blue-600 hover:text-blue-700"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回案例列表
          </Link>
        </div>
      </div>

      {/* Hero Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
                <TrendingUp className="w-4 h-4 mr-2" />
                银行业 · 高频交易
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                大型银行
                <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                  高频交易系统
                </span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                某国际知名银行采用CActor框架重构高频交易系统，实现了毫秒级响应时间和每秒百万级交易处理能力，
                交易延迟降低85%，处理能力提升300%。
              </p>
              <div className="flex flex-wrap gap-3">
                <Badge className="bg-green-100 text-green-700 hover:bg-green-200">
                  <CheckCircle className="w-3 h-3 mr-1" />
                  项目成功
                </Badge>
                <Badge variant="outline">23周交付</Badge>
                <Badge variant="outline">300%性能提升</Badge>
                <Badge variant="outline">40%成本节约</Badge>
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-2xl shadow-2xl p-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
                  核心性能指标
                </h3>
                <div className="space-y-6">
                  {keyMetrics.map((metric, index) => {
                    const Icon = metric.icon;
                    return (
                      <div
                        key={index}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center">
                          <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                            <Icon className={`w-5 h-5 ${metric.color}`} />
                          </div>
                          <div>
                            <div className="font-semibold text-gray-900">
                              {metric.label}
                            </div>
                            <div className="text-sm text-gray-500">
                              {metric.before} → {metric.after}
                            </div>
                          </div>
                        </div>
                        <div className={`text-2xl font-bold ${metric.color}`}>
                          ↑{metric.improvement}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 项目背景和挑战 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">
                项目背景
              </h2>
              <div className="space-y-4 text-gray-600">
                <p>
                  该银行是全球领先的投资银行，每日处理数百万笔高频交易。随着市场竞争加剧和监管要求提高，
                  现有交易系统面临严重的性能瓶颈和稳定性问题。
                </p>
                <p>
                  传统的单体架构无法满足毫秒级响应要求，系统经常出现延迟峰值，影响交易执行效果。
                  银行急需一套现代化的高性能交易系统来保持市场竞争优势。
                </p>
              </div>

              <div className="mt-8">
                <h3 className="text-xl font-semibold text-gray-900 mb-4">
                  业务需求
                </h3>
                <div className="space-y-3">
                  {[
                    '支持每秒100万+交易处理',
                    '平均响应时间<10ms',
                    '系统可用性99.99%+',
                    '支持多资产类别交易',
                    '实时风险监控和控制',
                    '符合金融监管要求',
                  ].map((requirement, index) => (
                    <div key={index} className="flex items-center">
                      <Target className="w-4 h-4 text-blue-600 mr-3" />
                      <span className="text-gray-700">{requirement}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">
                技术挑战
              </h2>
              <div className="space-y-6">
                {[
                  {
                    title: '极低延迟要求',
                    description:
                      '高频交易对延迟极其敏感，每毫秒的延迟都可能造成巨大损失',
                    icon: Clock,
                    severity: 'high',
                  },
                  {
                    title: '高并发处理',
                    description: '需要同时处理数百万并发请求，传统架构难以支撑',
                    icon: Users,
                    severity: 'high',
                  },
                  {
                    title: '数据一致性',
                    description: '分布式环境下保证交易数据的强一致性和准确性',
                    icon: Database,
                    severity: 'medium',
                  },
                  {
                    title: '系统稳定性',
                    description:
                      '7x24小时不间断运行，任何故障都可能造成重大损失',
                    icon: Shield,
                    severity: 'high',
                  },
                ].map((challenge, index) => {
                  const Icon = challenge.icon;
                  return (
                    <Card key={index} className="border-l-4 border-l-red-500">
                      <CardHeader className="pb-3">
                        <div className="flex items-center">
                          <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center mr-3">
                            <Icon className="w-4 h-4 text-red-600" />
                          </div>
                          <CardTitle className="text-lg">
                            {challenge.title}
                          </CardTitle>
                          <Badge
                            variant={
                              challenge.severity === 'high'
                                ? 'destructive'
                                : 'secondary'
                            }
                            className="ml-auto"
                          >
                            {challenge.severity === 'high' ? '高' : '中'}
                          </Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p className="text-gray-600">{challenge.description}</p>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CActor解决方案 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              CActor解决方案设计
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              基于CActor框架的7层架构设计，实现了高性能、高可用的分布式交易系统。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            {architectureComponents.map((component, index) => {
              const Icon = component.icon;
              return (
                <Card key={index} className="hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <div className="flex items-center">
                      <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center mr-4">
                        <Icon className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">
                          {component.name}
                        </CardTitle>
                        <CardDescription>
                          {component.description}
                        </CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-2">
                      {component.features.map((feature, featureIndex) => (
                        <div key={featureIndex} className="flex items-center">
                          <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                          <span className="text-sm text-gray-600">
                            {feature}
                          </span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* 架构优势 */}
          <div className="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
              架构核心优势
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  title: 'Actor模型',
                  description:
                    '基于消息传递的并发模型，避免锁竞争，实现真正的并行处理',
                  icon: '🎭',
                },
                {
                  title: '内存计算',
                  description: '关键数据全部在内存中处理，消除磁盘I/O瓶颈',
                  icon: '⚡',
                },
                {
                  title: '零拷贝网络',
                  description: '优化网络通信，减少数据拷贝开销，降低延迟',
                  icon: '🚀',
                },
              ].map((advantage, index) => (
                <div key={index} className="text-center">
                  <div className="text-4xl mb-3">{advantage.icon}</div>
                  <h4 className="font-semibold text-gray-900 mb-2">
                    {advantage.title}
                  </h4>
                  <p className="text-sm text-gray-600">
                    {advantage.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 实施过程 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              实施过程和关键节点
            </h2>
            <p className="text-lg text-gray-600">
              项目历时23周，分6个阶段有序推进，确保每个里程碑都达到预期目标。
            </p>
          </div>

          <div className="space-y-8">
            {timeline.map((phase, index) => (
              <div key={index} className="flex items-start">
                <div className="flex-shrink-0 mr-6">
                  <div
                    className={`w-12 h-12 rounded-full flex items-center justify-center ${
                      phase.status === 'completed'
                        ? 'bg-green-100'
                        : phase.status === 'ongoing'
                          ? 'bg-blue-100'
                          : 'bg-gray-100'
                    }`}
                  >
                    {phase.status === 'completed' ? (
                      <CheckCircle className="w-6 h-6 text-green-600" />
                    ) : phase.status === 'ongoing' ? (
                      <Clock className="w-6 h-6 text-blue-600" />
                    ) : (
                      <div className="w-6 h-6 rounded-full bg-gray-400" />
                    )}
                  </div>
                  {index < timeline.length - 1 && (
                    <div className="w-0.5 h-16 bg-gray-200 ml-6 mt-2" />
                  )}
                </div>

                <div className="flex-1">
                  <Card className="hover:shadow-md transition-shadow">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-xl">{phase.phase}</CardTitle>
                        <Badge variant="outline">{phase.duration}</Badge>
                      </div>
                      <CardDescription>{phase.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <h4 className="font-semibold text-gray-900">
                          主要交付物：
                        </h4>
                        <div className="flex flex-wrap gap-2">
                          {phase.deliverables.map(
                            (deliverable, deliverableIndex) => (
                              <Badge
                                key={deliverableIndex}
                                variant="secondary"
                                className="text-xs"
                              >
                                {deliverable}
                              </Badge>
                            )
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 成果展示 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              项目成果和业务价值
            </h2>
            <p className="text-lg text-gray-600">
              系统上线后取得了显著的性能提升和成本节约效果，为银行带来了巨大的商业价值。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* 性能提升 */}
            <Card className="p-6">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">
                性能提升对比
              </h3>
              <div className="space-y-6">
                {keyMetrics.map((metric, index) => {
                  const Icon = metric.icon;
                  return (
                    <div key={index}>
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center">
                          <Icon className={`w-5 h-5 ${metric.color} mr-2`} />
                          <span className="font-medium">{metric.label}</span>
                        </div>
                        <span className={`font-bold ${metric.color}`}>
                          +{metric.improvement}
                        </span>
                      </div>
                      <div className="flex items-center text-sm text-gray-600 mb-2">
                        <span>优化前: {metric.before}</span>
                        <ArrowLeft className="w-4 h-4 mx-2 rotate-180" />
                        <span>优化后: {metric.after}</span>
                      </div>
                      <Progress value={85} className="h-2" />
                    </div>
                  );
                })}
              </div>
            </Card>

            {/* 商业价值 */}
            <Card className="p-6">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">
                商业价值
              </h3>
              <div className="space-y-4">
                {[
                  {
                    title: '收入增长',
                    value: '25%',
                    description: '交易执行效率提升带来的收入增长',
                    icon: TrendingUp,
                    color: 'text-green-600',
                  },
                  {
                    title: '成本节约',
                    value: '40%',
                    description: '基础设施和运维成本大幅降低',
                    icon: DollarSign,
                    color: 'text-blue-600',
                  },
                  {
                    title: '风险降低',
                    value: '60%',
                    description: '系统故障和交易失败风险显著降低',
                    icon: Shield,
                    color: 'text-purple-600',
                  },
                  {
                    title: 'ROI回报',
                    value: '300%',
                    description: '项目投资回报率，6个月内收回成本',
                    icon: BarChart3,
                    color: 'text-orange-600',
                  },
                ].map((value, index) => {
                  const Icon = value.icon;
                  return (
                    <div
                      key={index}
                      className="flex items-center p-4 bg-gray-50 rounded-lg"
                    >
                      <div className="w-10 h-10 rounded-lg bg-white flex items-center justify-center mr-4">
                        <Icon className={`w-5 h-5 ${value.color}`} />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between mb-1">
                          <span className="font-semibold text-gray-900">
                            {value.title}
                          </span>
                          <span className={`text-2xl font-bold ${value.color}`}>
                            {value.value}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600">
                          {value.description}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
        </div>
      </section>

      {/* 客户证言 */}
      <section className="py-16 px-4 bg-gradient-to-r from-blue-600 to-cyan-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <div className="text-6xl mb-6">&ldquo;</div>
          <blockquote className="text-2xl md:text-3xl font-light mb-8 leading-relaxed">
            &ldquo;CActor框架帮助我们实现了前所未有的交易性能。系统上线后，我们的交易延迟降低了85%，
            处理能力提升了300%，这直接转化为了显著的业务收益。更重要的是，系统的稳定性让我们
            在激烈的市场竞争中获得了巨大优势。&rdquo;
          </blockquote>
          <div className="flex items-center justify-center">
            <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4">
              <Users className="w-8 h-8" />
            </div>
            <div className="text-left">
              <div className="font-semibold text-lg">张总监</div>
              <div className="opacity-90">技术总监 · 某国际知名银行</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
            准备构建您的高性能交易系统？
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            联系我们的专家团队，了解CActor框架如何为您的金融业务带来突破性改进。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-blue-600 hover:bg-blue-700">
              联系技术专家
            </Button>
            <Button size="lg" variant="outline">
              下载技术白皮书
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
